<template>
  <div :class="[pagination ? 'headAndPag' : 'headNoPag' ,'searchTable']">
      <slot name="head">
          <el-input class="searchInput" :style="searchStyle || (selection? '' : 'width: 300px')" v-model="searchText"
            suffix-icon="el-icon-search" :placeholder="placetext?placetext:'搜索'"></el-input>
        </slot>
    <div style="clear: both;"></div>
    <div class="searchTable_main">
      <el-table v-loading="sloading" element-loading-text="拼命加载中,请稍候..." ref="searchTable" class="searchTable_table"
        :data="dataList"  @select="selectChange" @select-all="selectChange"
        :expand-row-keys="expandRowKeys" :row-key="expandKey" stripe border align="center">
        <el-table-column v-if="showNumber" type="index" :index="number" align="center" label="序号" width="50px"></el-table-column>
        <slot />
      </el-table>
    </div>
    <div :class="[pageSmall ? 'smallPage' : '', 'page']" :style="pagination === false ? 'padding:4px  0px;' : 'padding:4px  0px;border:1px solid #dfe6ec;border-top: none;'"
      height="60px">
      <el-pagination :small="pageSmall || false" v-if="paginationData" :layout="pageLayout || 'total,prev, pager, next, jumper'"
        :page-size="pageSizeData" :total="total" @current-change="pageChangeHandler">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchText: '',
      expandRowKeys: Array.empty,
      pageIndex: 1,
      total: 0,
      pageSizeData: this.$props.pageSize || 15,
      paginationData: this.$props.pagination === undefined ? true : this.$props.pagination
    }
  },
  props: [
    'pagination', // 是否分页
    'pageSize', // 每页条数
    'data', // [{data1},{data2}]
    'searchKeys', // [key1,key2]
    'selection', // 前面的checkbox,传入selectChange事件
    'expandKey', // 行key
    'searchStyle', // 搜索框样式
    'pageLayout', // 分页布局
    'pageSmall', // 是否是mini样式
    'selectRowKeys', // 选中的行
    'rowkey', // 每一行的key
    'loading',
    'head',
    'showNumber',
    'placetext'
  ],
  watch: {
    selectRowKeys: function () {
      this.selectDefault(true)
    },
    dataList: function () {
      this.selectDefault()
    }
  },
  computed: {
    sloading: function () {
      return this.$props.loading || false
    },
    dataList: function () {
      const self = this
      let tmpData = this.data
      // 查询
      if (tmpData && tmpData.length > 0 && self.searchKeys && self.searchKeys.length > 0) {
        tmpData = tmpData.filter((element) => {
          let sum = -1
          self.searchKeys.forEach(ele => {
            if (!element[ele]) {
              sum++
            } else {
              sum += element[ele].toString().toLowerCase().indexOf(self.searchText.toLowerCase()) >= 0 ? 1 : 0
            }
          })
          return sum >= 0
        })
      }
      if (tmpData) {
        self.total = tmpData.length
        if (self.paginationData) {
          tmpData = tmpData.slice((self.pageIndex - 1) * 10, self.pageIndex * 10)
        }
      }
      return tmpData
    }
  },
  methods: {
    number (index) {
      return index + (this.pageIndex - 1) * 10 + 1
    },
    pageChangeHandler: function (currentPage) {
      this.pageIndex = currentPage
    },
    selectDefault: function (clear) {
      const self = this
      if (this.selection && self.selectRowKeys) {
        setTimeout(() => {
          if (clear) {
            self.$refs.searchTable.clearSelection()
          }
          self.$refs.searchTable.clearSelection()
          this.dataList.forEach(ele => {
            self.selectRowKeys.forEach(element => {
              if (ele[self.rowkey] === element) {
                self.$refs.searchTable.toggleRowSelection(ele)
              }
            })
          })
        })
      }
    },
    selectChange: function (rows, row) {
      if (this.selection) {
        this.selection(row, rows)
      }
    }
  }
}
</script>

<style>
  .searchInput {
    float: right;
  }

  .page {
    text-align: center;
    overflow-x: auto;
  }

  .smallPage .el-pagination button {
    position: relative;
    top: 3px;
  }

  .smallPage .el-pagination__jump {
    margin: 0px;
  }

  .searchTable_main {
    overflow: auto;
  }

  .searchTable_main .el-table {
    height: 100%;
  }

  td .el-container {
    padding: 15px;
    background-color: white;
  }

  td .el-container .el-table {
    min-height: 300px;
  }

  td .el-tabs {
    padding: 15px;
    background-color: white;
  }

  .headAndPag {
    grid-template-rows: 60px 1fr 60px;
  }

  .headNoPag {
    grid-template-rows: 60px 1fr;
  }

  .noHeadPag {
    grid-template-rows: 1fr 60px;
  }

  .searchTable {
    /* display: grid; */
    height: 100%;
  }
</style>
